<template>
	<view>
		<view class="scroll_view_container">
			<!-- 左侧滑动区域 -->
			<scroll-view class="cate_left_bar" scroll-y="true" style="height: 100vh">
				<block v-for="(item,i) in cate_list" :key="i">
					<view :class="['cate_left_item',i===active ? ' active' : '' ]" @click="active_changed(i)">
						{{item.category}}
					</view>
				</block>
			</scroll-view>
			<!-- 右侧滑动区域 -->
			<scroll-view class="cate_right_bar" scroll-y="true" style="height: 100vh" :scroll-top="scroll_top">
				<view v-for="(item,i) in cate_list_level2" :key="i">
					<view class="cate_right_title">
						/{{item.sub_category}}/
					</view>
					<view class="cate_list2">
						<view class="cate_right_item" v-for="(item2,i2) in item.children" :key="i2"
							@click="nav_to_goods_list(item2)">
							<image :src="item2.image_url" mode=""></image>
							<text>
								{{item2.name}}
							</text>
						</view>
					</view>
				</view>
			</scroll-view>


		</view>
	</view>
</template>

<script>
	import {
		usePetStore
	} from '@/stores/store'
	import { getCateList } from '@/utils/category'
	
	export default {
		data() {
			return {
				active: 0,
				scroll_top: 0,
				currentCategory: '',
				cate_list: [],
				cate_list_level2: []
			};
		},
		onLoad() {},
		onShow() {
			const petStore = usePetStore();
			this.currentCategory = petStore.currentCategory;

			// 确保分类数据已加载
			if (this.cate_list.length === 0) {
				this.get_cate_list().then(() => {
					this.loadCategoryData();
				});
			} else {
				this.loadCategoryData();
			}
		},

		methods: {
			async get_cate_list() {
				try {
					const categories = await getCateList();
					this.cate_list = categories;
					this.cate_list_level2 = this.cate_list[0].sub_categories;
					return this.cate_list;
				} catch (error) {
					console.error('分类数据加载失败:', error);
					uni.showToast({
						title: '获取分类失败',
						icon: 'none'
					});
					throw error;
				}
			},

			active_changed(i) {
				this.active = i;
				this.cate_list_level2 = this.cate_list[i].sub_categories;
				this.scroll_top = this.scroll_top === 0 ? 1 : 0;
			},

			nav_to_goods_list(item) {
				uni.navigateTo({
					url: '/pages/detail/detail?name=' + item.name
				})

			},
			loadCategoryData() {
				// 遍历分类列表寻找匹配项
				const targetIndex = this.cate_list.findIndex(item =>
					item.category === this.currentCategory
				);

				// 找到匹配项时触发切换
				if (targetIndex !== -1 && targetIndex !== this.active) {
					this.active_changed(targetIndex);
				}
			}


		}
	}
</script>

<style lang="scss">
	.scroll_view_container {
		display: flex;
	}

	.cate_left_bar {
		width: 120px;
		//height: 100vh;

		.cate_left_item {
			background-color: #f7f7f7f7;
			text-align: center;
			font-size: 13px;
			line-height: 60px;

			&.active {
				background-color: #e6e6e6;
				postion: relative;

				&::before {
					content: '';
					display: block;
					background-color: #c00000;
					width: 3px;
					height: 30px;
					position: absolute; //绝对位置会不会修改当前的布局
					//top: 50%;
					left: 0;
					transform: translateY(50%);
				}
			}

		}
	}

	.cate_right_bar {
		//height: 100vh;
	}

	.cate_right_title {
		font-size: 15px;
		font-weight: bold;
		text-align: center;
		padding: 15px 0;
	}

	.cate_list2 {
		display: flex;
		flex-wrap: wrap;

		.cate_right_item {
			width: 33.33%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			margin-bottom: 20px;


			image {
				width: 80px;
				height: 80px;
				border-radius: 50%;
			}

			text {
				font-size: 12px;
			}
		}
	}
</style>